<template>
  <el-row :gutter="10">
    <el-col :span="6">
      <div class="app-container">
        <quota-tree
          class="quotaTree"
          ref="quotaTree"
          :showcheckbox="false"
          @sendIds="childrenData"
          @clickObj="clickObj"
          :hasFilter="false"
          :showCheckbox="showCheckbox"
          :isDimension="isDimension"
          @dragNode="handleDragNode"
        ></quota-tree>
      </div>
    </el-col>
    <el-col :span="18">
      <div class="app-container">
        <!--        <el-row>-->
        <!--          <el-col :span="4">-->
        <!--                        <el-input-->
        <!--                          placeholder="请输入内容"-->
        <!--                          v-model="queryParams.key"-->
        <!--                          clearable>-->
        <!--                        </el-input>-->
        <!--          </el-col>-->
        <!--          <el-col :span="3">-->
        <!--            <el-button icon="el-icon-search" type="success">搜索</el-button>-->
        <!--          </el-col>-->
        <!--        </el-row>-->
        <el-row>
          <el-col :span="24">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column
                align="center"
                prop="quotaName"
                label="指标名称"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="quotaUname"
                label="指标简称"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="quotaDescription"
                label="指标描述"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="quotaCode"
                label="指标代码">
              </el-table-column>
              <el-table-column
                align="center"
                prop="measure"
                label="度量值">
              </el-table-column>
              <el-table-column
                align="center"
                prop="value"
                label="指标值">
              </el-table-column>
              <el-table-column
                align="center"
                prop="dimensionName"
                label="维度集合">
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button type="primary" v-if="scope.row.id!=null" icon="el-icon-edit"
                             @click="handleUpdate(scope.row)">修改指标值
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="count > 0"
              :total="count"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="loadQuotaValueData"
            />
          </el-col>
        </el-row>
      </div>
      <div>
        <el-dialog
          center
          title="修改指标值"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <div>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
              <el-form-item label="维度值" prop="measure">
                <el-input v-model="form.measure" placeholder="请输入维度值"/>
              </el-form-item>
              <el-form-item label="指标值" prop="value">
                <el-input v-model="form.value" placeholder="请输入指标值"/>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm">提 交</el-button>
            </span>
        </el-dialog>
      </div>
    </el-col>
  </el-row>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import QuotaTree from '@/views/quota/modeling/QuotaTree.vue'
import { getQuotaAndValue, updateValue } from '@/api/quota/define/define.js'
//例如：import 《组件名称》 from '《组件路径》';
export default {
  name: 'quotaSolidify',
  //使用import引入外部组件需要在components对象中注册才可以使用
  components: {
    QuotaTree
  },
  props: {
    label: 'name',
    children: 'zones',
    isLeaf: 'leaf'
  },
  data() {
    return {
      dialogVisible: false,
      showCheckbox: true,
      isDimension: '1',
      selectColumn: undefined,
      quotaIdList: [],
      count: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        themeIds: [],
        quotaIds: [],
        flag: 0,
        key: ''
      },
      tableData: [],
      form: {
        measure: undefined,
        value: undefined
      },
      rules: {
        id: [
          { required: true, message: '自增主键不能为空', trigger: 'blur' }
        ],
        measure: [
          { required: true, message: '纬度值不能为空', trigger: 'blur' }
        ],
        value: [
          { required: true, message: '指标值不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          updateValue(this.form).then(response => {
            console.log(response)
            if (response.data) {
              this.msgSuccess('值已更新')
              this.dialogVisible = false
              this.loadQuotaValueData(this.quotaIdList)
              this.resetForm('form')
            }
          })
        }
      })
    },
    handleUpdate(row) {
      if (row.quotaId == null) {
        this.msgError('还未关联维度')
      } else {
        this.dialogVisible = true
        this.form.id = row.id
        this.form.measure = row.measure
        this.form.value = row.value
      }

    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    childrenData(quotaIds) {
      if (quotaIds.length > 0) {
        this.queryParams.quotaIds = [...this.queryParams.quotaIds, ...quotaIds]
        this.loadQuotaValueData()
        this.quotaIdList = quotaIds
      }
    },
    clickObj(obj) {
      console.log(obj)
      //查询参数赋值
      if (obj.category && obj.isQuota) {
        this.queryParams.flag = 0
        this.queryParams.quotaIds = []
        //this.queryParams.themeIds = [obj.id]
        this.queryParams.themeIds = []
      } else if (obj.category === '主题集') {
        this.queryParams.flag = 1
        this.queryParams.quotaIds = []
        //this.queryParams.themeIds = [obj.id]
        this.queryParams.themeIds = []
      } else if (obj.category === '主题') {
        this.queryParams.flag = 2
        this.queryParams.quotaIds = []
        this.queryParams.themeIds = [obj.id]
      } else if (obj.isQuota) {
        this.queryParams.flag = 3
        this.queryParams.quotaIds = [obj.id]
        this.queryParams.themeIds = []
      }
      this.loadQuotaValueData()
    },
    handleDragNode(data) {
      this.selectColumn = data
    },
    loadQuotaValueData() {
      console.log(this.queryParams)
      getQuotaAndValue(this.queryParams).then((res) => {
        this.tableData = res.data.data
        this.count = res.data.count
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.loadQuotaValueData()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前
  beforeMount() {
  }, //生命周期 - 挂载之前
  beforeUpdate() {
  }, //生命周期 - 更新之前
  updated() {
  }, //生命周期 - 更新之后
  beforeDestroy() {
  }, //生命周期 - 销毁之前
  destroyed() {
  }, //生命周期 - 销毁完成
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less">
.quotaTree {
  overflow: auto;

  .el-tree {
    .el-tree-node__content {
      display: inline-block;
      min-width: 100%;
    }

    .el-tree-node__children {
      overflow: visible !important;
    }
  }
}
</style>
